<template>
	<view>
		<u-toast ref="uToast" />
		<u-navbar :border-bottom="false" :is-back="false" :background="{backgroundColor: '#2979ff'}">
			<view class="nav-box">
				<text class="nav-title">聚优惠</text>
				<u-search :show-action="false" action-text="搜索" @focus="searchClick"></u-search>
			</view>
		</u-navbar>
		<view class="content">
			<view class="banner-box">
				<u-swiper class="banner" :list="bannerList" bg-color="#2979ff" height="300rpx" @click="bannerClick">
				</u-swiper>
			</view>
			<u-card class="column-box" margin="60rpx 20rpx 30rpx" :show-head="false" :show-foot="false">
				<view class="" slot="body">
					<u-grid :col="4" :border="false">
						<u-grid-item>
							<u-image height="64" width="64"
								src="https://youhui-1252364343.cos.ap-beijing.myqcloud.com/taobao.png" mode="widthFix">
							</u-image>
							<view class="grid-text">淘宝热卖</view>
						</u-grid-item>
						<u-grid-item>
							<u-image height="64" width="64"
								src="https://youhui-1252364343.cos.ap-beijing.myqcloud.com/jingdong.png" mode="widthFix">
							</u-image>
							<view class="grid-text">京东返现</view>
						</u-grid-item>
					</u-grid>
				</view>


			</u-card>
		</view>
		<u-tabbar v-model="current" :list="list"></u-tabbar>
	</view>
</template>

<script>
	import config from "../../libs/config/config.js"

	export default {
		data() {
			return {
				list: config.tabBarList,
				current: 0,
				bannerList: [{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}]
			}
		},
		methods: {
			searchClick() {
				this.$refs.uToast.show({
					title: '跳转到搜索页面'
				})
			},
			bannerClick(index) {
				this.$refs.uToast.show({
					title: '点击了banner' + index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-box {
		display: flex;
		width: 100%;
		align-items: center;
		flex: 1;

		.nav-title {
			margin-left: 14rpx;
			font-size: 34rpx;
			font-weight: 900;
			margin-right: 20rpx;
			color: #fff;
		}
	}

	.content {
		background-color: $u-bg-color;
		min-height: 100vh;

		.banner-box {
			height: 300rpx;
			background-color: $u-type-primary;
			border-bottom-left-radius: 20%;
			border-bottom-right-radius: 20%;
			padding: 0 20rpx;

			.banner {
				/deep/ swiper {
					margin-top: 40rpx;
					background-color: rgba(0, 0, 0, 0);
				}

			}
		}

		/deep/.column-box {
			margin-top: 78rpx;

			.grid-text {
				font-size: 26rpx;
				line-height: 48rpx;
				color: $u-main-color;
			}
		}
	}
</style>
